<template>
	<view class="my-nav-bar">
		<u-navbar :title="title" :is-back="backShow && isBack" :border-bottom="borderBottom"
			:back-icon-color="backIconColor" :title-color="titleColor" :background="background" :is-fixed="isFixed"
			:custom-back="back">
			<template v-slot:right>
				<slot />
			</template>
		</u-navbar>
	</view>
</template>

<script>
	/**
	 *  isBack 优先级 路由栈仅有一个时 isback 默认false 传入属性无效
	 * **/

	export default {
		name: "m-navbar",
		data() {
			return {};
		},
		props: {
			title: {
				type: String,
				default: function() {
					return "导航名称";
				}
			},
			backIconColor: {
				type: String,
				default: function() {
					return "#ffffff";
				}
			},
			titleColor: {
				type: String,
				default: function() {
					return "#ffffff";
				}
			},
			background: {
				type: Object,
				default: function() {
					return {
						background: "#098EFF"
					};
				}
			},
			isBack: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			borderBottom: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			isFixed: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			backShow() {
				const pagesLength = getCurrentPages().length;
				/* #ifdef H5 */
					const historyLength = history.length;
					return pagesLength !== 1 || historyLength !== 1;
				/* #endif */

				/* #ifndef H5 */
				return pagesLength !== 1;
				/* #endif */
			}
		},
		methods: {
			back() {
				/* #ifdef H5 */
					history.back();
				/* #endif */
				/* #ifndef H5 */
					this.$back({ leve: 1 })
				/* #endif */
			}
		}
	};
</script>
